<template>
  <AppsDefineBackComponent v-if="isShowTopBar" :left-arrow="true" :title="topBar" />
  <div class="w-screen h-screen flex">
    <!-- start:显示背景图片和背景颜色 -->
    <img src="/background-image.png" class="flex bg-contain bg-no-repeat blur-sm" alt="background image alt"
      v-if="showBackGround" />
    <div class="absolute left-0 top-0 w-screen h-screen bg-slate-800/70 dark:bg-slate-500/70" v-if="showBackGround" />
    <!-- end:显示背景图片和背景颜色 -->
  </div>
  <!-- start:显示logo -->
  <div class="absolute flex flex-col top-1/4 left-0 w-screen justify-center items-center" v-if="showIcon">
    <img src="/favicon.ico" class="h-32 w-32 rounded-3xl flex bg-contain bg-no-repeat blur-sm" alt="logo image alt" />
  </div>
  <!-- end:显示logo -->
  <div class="absolute flex flex-col bottom-10 left-0 w-screen justify-center items-center">
    <AppsDefineComponentConfig>
      <slot />
      <VanCheckbox v-model="useMyUserLoginStoreStore().agree" class="flex justify-center items-center text-center my-2"
        v-if="showVanCheckbox">
        <span class="text-area-show" v-text="userAgreementsVanCheckbox.message" />
        <NuxtLink class="text-area-show-link" v-text="userAgreementsVanCheckbox.service"
          @click="navigateToUserAgreements('service')" />
        <span class="text-area-show" v-text="userAgreementsVanCheckbox.and" />
        <NuxtLink class="text-area-show-link" v-text="userAgreementsVanCheckbox.privacye"
          @click="navigateToUserAgreements('privacye')" />
      </VanCheckbox>
      <!-- start:显示第三方登录 -->
      <AppsDefineShowAnotherLoginComponents v-if="showAnotherLogin" />
      <!-- end:显示第三方登录 -->
    </AppsDefineComponentConfig>
  </div>
  <div class="absolute bottom-0 my-1 w-screen justify-center items-center text-center" v-if="showBarTitle">
    <div class="text-white/80 dark:text-slate-300/60 text-xs" v-text="showBottomBar" />
  </div>
</template>

<script lang="ts" setup>
defineProps<{
  showBackGround?: boolean;
  showBarTitle?: boolean,
  showVanCheckbox?: boolean,
  showIcon?: boolean,
  isShowTopBar?: boolean,
  showAnotherLogin?: boolean,
}>();
const showBottomBar = localesGetValueForKey(
  "layout.showBottomBar",
  "极客实验室@九型人格测试版权所有(2024.07~2024.12)"
);

const topBar = localesGetValueForKey("pageHomeTitle.userLogin", "登录") as string;
const userAgreementsVanCheckbox = {
  message: localesGetValueForKey(
    "vanCheckbox.VanCheckboxValueMessageTemplate",
    "已阅读并同意九型人格测试的"
  ),
  service: localesGetValueForKey(
    "pageHomeTitle.userServiceAgreements",
    "服务协议"
  ),
  privacye: localesGetValueForKey(
    "pageHomeTitle.userPrivacyeAgreements",
    "隐私协议"
  ),
  and: localesGetValueForKey(
    "vanCheckbox.VanCheckboxValueAndMessageTemplate",
    "和"
  ),
};
</script>
